let prev = document.querySelector(".btn-prev");
let next = document.querySelector(".btn-next");
let bar = document.querySelector(".bar");
let item = document.querySelectorAll(".item");
let data = ["0", "30%", "60%", "90%"];
let i = 1;
prev.addEventListener("click", () => {
  if (i <= 1) return;
  if (i == 2) {
    prev.classList.add("disabled");
  }
  next.classList.remove("disabled");
  i -= 1;
  bar.style.width = data[i - 1];
  item[i].classList.remove("active");
});
next.addEventListener("click", () => {
  if (i > 3) return;
  if (i === 3) {
    next.classList.add("disabled");
  }
  prev.classList.remove("disabled");
  bar.style.width = data[i];
  item[i].classList.add("active");
  i += 1;
});
